<template>
  <div>
    <div class="body">
      <div class="loading"><i class="el-icon-loading"></i></div>
      <div class="jsT" :style="{ backgroundImage: 'url(' + imgs[index] + ')' }">
        <div class="la lr" @click="ji">{{ "<" }}</div>
            <div class="ra lr" @click="ze">{{ ">" }}</div>
        </div>
        <div class="zsk">
          <div class="sc">{{ name }}</div>
          <div class="lc">
            <i class="el-icon-map-location"></i>
            <div class="jlc">{{ address }}</div>
          </div>
          <div class="pf">
            <i class="el-icon-star-on"></i>评分：{{ score }}/5.0
          </div>
          <div class="cx">
            <i class="el-icon-fork-spoon"></i>菜系：{{ caiXi }}
          </div>
        </div>
        <div class="km">
          <div class="kt">
            <div class="rj">
              <i class="el-icon-s-custom"></i>人均：{{ price }}
            </div>
            <div class="tsc">
              <div class="tscW"><i class="el-icon-s-flag"></i>特色菜:</div>
              <div class="tsc1">{{ characteristic }}</div>
            </div>
          </div>
          <div class="mp">
            <div class="kys">
              <i class="el-icon-s-order"></i>营业时间:&nbsp;{{ openTime }}
            </div>
            <div class="lxd">
              <i class="el-icon-phone"></i>联系电话:&nbsp;{{ phone }}
            </div>
          </div>
        </div>
        <div class="dh">
          <div class="dht">
            <div id="map" style="height: 100%;"></div>
          </div>
          <div class="dha" @click="$router.push(`/home/navigationPage/${userId}/${name}/${cityName}`)">
            导航
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import { BMPGL } from "../../../bmpgl.js"
export default {
  data() {
    return {
      ak: "7lZ559WeX7j6Fyg2ykx4U1rlsgK1RSJp",
      userId: this.$route.params.userId,
      txUrl:
        "",
      userName:"",
      imgs: [],
      name: this.$route.params.scene,
      address: "",
      score: "",
      cityName: this.$route.params.city,
      price: "",
      openTime: "",
      phone: "",
      caiXi: "",
      characteristic: "",
      index: 0
    };
  },
  methods: {
    hqy() {
      let _this = this;
      const axios = require("axios");
      let data = JSON.stringify({
        "userID": _this.userId,
      });
      let config = {
        method: "post",
        maxBodyLength: Infinity,
        url: "http://8.134.215.31:11112/userMessage/get",
        headers: {
          "Content-Type": "application/json",
          "token": localStorage.getItem("JWT_TOKEN"),
        },
        data: data,
      };
      axios
        .request(config)
        .then((response) => {
          _this.userName = response.data.data.username;
          _this.txUrl = response.data.data.txUrl;
          const param1 = _this.userId;
          const param2 = _this.txUrl;
          const param3 = _this.$route.name;
          const param4 = _this.userName;
         _this.$emit("childEvent", { param1, param2, param3,param4 });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    ji() {
      if (this.index == 0)
        this.index = this.imgs.length - 1;
      else
        this.index--;
    },
    ze() {
      if (this.index == this.imgs.length - 1)
        this.index = 0;
      else
        this.index++;
    },
    initMap() {
      // 传入密钥获取地图回调。
      BMPGL(this.ak).then((BMapGL) => {
        // 创建地图实例
        let map = new BMapGL.Map("map");
        let ls = new BMapGL.LocalSearch(this.cityName);
        ls.enableFirstResultSelection(true);
        ls.search(this.name);
        ls.setSearchCompleteCallback(function (rs) {
          if (ls.getStatus() == BMAP_STATUS_SUCCESS) {
            let point = rs.getPoi(0).point;
            // 初始化地图，设置中心点坐标和地图级别
            map.centerAndZoom(point, 18)
            //开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true)
            // map.setHeading(64.5)
            // map.setTilt(73)
            // 保存数据
            // this.myMap = map
            var marker = new BMapGL.Marker(point);        // 创建标注   
            map.addOverlay(marker);
            let that = this
            marker.addEventListener("click", function () {
              var opts = {
                width: 100,     // 信息窗口宽度
                height: 60,    // 信息窗口高度
                title: that.scene  // 信息窗口标题
              }
              var infoWindow = new BMapGL.InfoWindow(that.location, opts);  // 创建信息窗口对象
              map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口       
            })            // 将标注添加到地图中
          }
        });

      })
        .catch((err) => {
          console.log(err)
        })

    },
  },
  mounted() {
    document.documentElement.scrollTop = 0;
    this.hqy();
    let _this = this;
    const axios = require("axios");
    let data = JSON.stringify({
      "cityName": _this.cityName,
      "name": _this.name,
    });
    let config = {
      method: "post",
      maxBodyLength: Infinity,
      url: "http://8.134.215.31:11113/restaurant/get",
      headers: {
        "Content-Type": "application/json",
      },
      data: data,
    };
     axios
       .request(config)
       .then((response) => {
         _this.imgs = response.data.imgs;
         _this.address = response.data.address;
         _this.score = response.data.score;
         _this.price = response.data.price;
         _this.openTime = response.data.openTime;
         _this.phone = response.data.phone;
         let a = response.data.caixi;
         for (let i = 0; i < a.length; i++) {
           _this.caiXi += a[i];
           if (i != a.length - 1) _this.caiXi += ",";
         }
         _this.characteristic = response.data.characteristic;
         document.querySelector('.loading').style.display="none";
       })
       .catch((error) => {
         console.log(error);
       });
    this.initMap();
  },
};
</script>
<style scoped>
.body {
  user-select: none;
  overflow: hidden;
  margin: 0 auto;
  width: 60%;
  min-height: 1000px;
  height: auto;
}
.loading{
  position: fixed;
  left: 50%;
  top: 700px;
  color: white;
  background-color: grey;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-left: -25px;
}
.jsT {
  position: relative;
  margin: 50px auto;
  width: 90%;
  height: 500px;
  background-size: 100% 100%;
  background-color: pink;
  background-repeat: no-repeat;
}

.la {
  position: absolute;
  left: 3%;
  top: 50%;
  width: 50px;
  height: 10%;
  margin-top: -25px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  color: white;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

.ra {
  position: absolute;
  right: 3%;
  top: 50%;
  width: 50px;
  height: 10%;
  margin-top: -25px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  color: white;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

.lr:hover {
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.lr:active {
  background-color: rgba(0, 0, 0, 0.3);
}

.zsk {
  overflow: hidden;
  position: relative;
  margin: 20px auto;
  margin-top: 0px;
  width: 85%;
  height: 240px;
  border: 1px rgba(128, 128, 128, 0.4) solid;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.sc {
  position: absolute;
  top: 34.5px;
  left: 5%;
  height: 46px;
  width: 40%;
  line-height: 46px;
  font-size: 25px;
  font-weight: 600;
}

.lc {
  position: absolute;
  top: 45px;
  left: 50%;
  height: 46px;
  width: 50%;
  font-size: 15px;
}

.jlc {
  position: absolute;
  left: 6%;
  width: 94%;
  height: 100%;
  word-wrap: break-word;
}

.el-icon-map-location {
  position: absolute;
  display: inline-block;
  height: 100%;
  width: 6%;
  font-size: 20px;
}

.pf {
  position: absolute;
  left: 5%;
  top: 60%;
  width: 40%;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  font-weight: 500px;
  color: blue;
}

.cx {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 55%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  color: green;
}

.km {
  display: flex;
  margin: 20px auto;
  margin-top: 0px;
  width: 85%;
  height: 230px;
  justify-content: space-between;
}

.kt {
  position: relative;
  height: 100%;
  width: 65%;
  border-radius: 10px;
  border: 1px rgba(128, 128, 128, 0.4) solid;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.rj {
  position: absolute;
  left: 8%;
  top: 10%;
  width: 40%;
  height: 20%;
  line-height: 46px;
  font-size: 17px;
}

.tsc {
  position: absolute;
  display: flex;
  left: 8%;
  top: 50%;
  height: 45%;
  width: 90%;
  justify-content: space-between;
}

.tscW {
  flex: 2;
  font-weight: 600;
  font-size: 17px;
  color: orange;
}

.tsc1 {
  flex: 9;
}

.mp {
  position: relative;
  height: 100%;
  width: 30%;
  border-radius: 10px;
  border: 1px rgba(128, 128, 128, 0.4) solid;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.kys {
  position: absolute;
  top: 12%;
  left: 5%;
  width: 95%;
  height: 30%;
}

.lxd {
  position: absolute;
  top: 47%;
  left: 5%;
  width: 95%;
  height: 50%;
}

.dh {
  margin: 50px auto;
  width: 85%;
  height: 600px;
  border: 1px rgba(128, 128, 128, 0.4) solid;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.dht {
  margin: 30px auto;
  width: 86%;
  height: 75%;
  /* background-color: pink; */
}

.dha {
  margin: 10px auto;
  width: 30%;
  height: 10%;
  background-color: rgba(128, 128, 128, 0.635);
  color: white;
  line-height: 60px;
  text-align: center;
  font-size: 25px;
  border-radius: 20px;
}

.dha:hover {
  background-color: grey;
  color: pink;
  cursor: pointer;
}

.dha:active {
  background-color: rgba(128, 128, 128, 0.635);
}
</style>